<nz-card class="list_card" [nzTitle]="cardTitle" [nzExtra]="extraTemplate">
  <form nz-form>
    <nz-tabset>
      <!-- 微信支付选项卡 -->
      <nz-tab [nzTitle]="wechatPayTabTitleTpl">
        <ng-template #wechatPayTabTitleTpl>
          <span>微信支付</span>
        </ng-template>

        <!-- 是否启用 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="weChatIsActive" [(ngModel)]="weChatPay.isActive">是否启用(请确认配置正确后再启用！)</label>
            </div>
          </div>
        </div>

        <!-- 开发者的应用ID -->
        <nz-form-item>
          <nz-form-label nzFor="appId">开发者的应用ID</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="开发者的应用ID" name="wechatAppId" [attr.disabled]="!weChatPay.isActive ? 'disabled' : null"
              [(ngModel)]="weChatPay.appId">
          </nz-form-control>
        </nz-form-item>

        <!-- 商户Id -->
        <nz-form-item>
          <nz-form-label nzFor="mchId">商户Id</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="商户Id" name="wechatMchId" [attr.disabled]="!weChatPay.isActive ? 'disabled' : null"
              [(ngModel)]="weChatPay.mchId">
          </nz-form-control>
        </nz-form-item>

        <!-- 支付密钥 -->
        <nz-form-item>
          <nz-form-label nzFor="tenPayKey">支付密钥</nz-form-label>
          <nz-form-control>
            <input type="password" nz-input placeholder="支付密钥" name="wechatTenPayKey" [attr.disabled]="!weChatPay.isActive ? 'disabled' : null"
              [(ngModel)]="weChatPay.tenPayKey">
          </nz-form-control>
        </nz-form-item>

        <!-- 支付回调路径 -->
        <nz-form-item>
          <nz-form-label nzFor="payNotifyUrl">支付回调路径</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="支付回调路径" name="wechatPayNotifyUrl" [attr.disabled]="!weChatPay.isActive ? 'disabled' : null"
              [(ngModel)]="weChatPay.payNotifyUrl">
          </nz-form-control>
        </nz-form-item>

      </nz-tab>

      <!-- 支付宝支付选项卡 -->
      <nz-tab [nzTitle]="aliPayTabTitleTpl">
        <ng-template #aliPayTabTitleTpl>
          <span>支付宝支付</span>
        </ng-template>

        <!-- 是否启用 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="aliPayIsActive" [(ngModel)]="aliPay.isActive">是否启用(请确认配置正确后再启用！)</label>
            </div>
          </div>
        </div>

        <!-- 开发者的应用ID -->
        <nz-form-item>
          <nz-form-label nzFor="aliPayAppId">开发者的应用ID</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="开发者的应用ID" name="aliPayAppId" [attr.disabled]="!aliPay.isActive ? 'disabled' : null"
              [(ngModel)]="aliPay.appId">
          </nz-form-control>
        </nz-form-item>

        <!-- 合作商户UID -->
        <nz-form-item>
          <nz-form-label nzFor="aliPayUid">合作商户UID</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="合作商户UID" name="aliPayUid" [attr.disabled]="!aliPay.isActive ? 'disabled' : null"
              [(ngModel)]="aliPay.uid">
          </nz-form-control>
        </nz-form-item>

        <!-- 支付宝网关 -->
        <nz-form-item>
          <nz-form-label nzFor="aliPayGatewayurl">支付宝网关</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="支付宝网关" name="aliPayGatewayurl" [attr.disabled]="!aliPay.isActive ? 'disabled' : null"
              [(ngModel)]="aliPay.gatewayurl">
          </nz-form-control>
        </nz-form-item>

        <!-- 支付宝公钥 -->
        <nz-form-item>
          <nz-form-label nzFor="aliPayPublicKey">支付宝公钥</nz-form-label>
          <!-- 查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。 -->
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="支付宝公钥" name="aliPayPublicKey" [attr.disabled]="!aliPay.isActive ? 'disabled' : null"
              [(ngModel)]="aliPay.alipayPublicKey"></textarea>
          </nz-form-control>
        </nz-form-item>

        <!-- 支付宝签名公钥 -->
        <nz-form-item>
          <nz-form-label nzFor="alipaySignPublicKey">支付宝签名公钥</nz-form-label>
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="支付宝签名公钥" name="alipaySignPublicKey" [attr.disabled]="!aliPay.isActive ? 'disabled' : null"
              [(ngModel)]="aliPay.alipaySignPublicKey"></textarea>
          </nz-form-control>
        </nz-form-item>

        <!-- 商户私钥 -->
        <nz-form-item>
          <nz-form-label nzFor="alipayPrivateKey">商户私钥</nz-form-label>
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="商户私钥" name="alipayPrivateKey" [attr.disabled]="!aliPay.isActive ? 'disabled' : null"
              [(ngModel)]="aliPay.privateKey"></textarea>
          </nz-form-control>
        </nz-form-item>

        <!-- 编码格式 -->
        <nz-form-item>
          <nz-form-label nzFor="alipayCharSet">编码格式</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="aliPay.charSet" name="aliPayCharSet" nzAllowClear nzPlaceHolder="Choose"
              [nzDisabled]="!aliPay.isActive">
              <nz-option nzValue="utf-8" nzLabel="utf-8"></nz-option>
              <nz-option nzValue="gbk" nzLabel="gbk"></nz-option>
              <nz-option nzValue="gb2312" nzLabel="gb2312"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <!-- 回调地址 -->
        <nz-form-item>
          <nz-form-label nzFor="aliPayNotify">回调地址</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="回调地址" name="aliPayNotify" [attr.disabled]="!aliPay.isActive ? 'disabled' : null"
              [(ngModel)]="aliPay.notify">
          </nz-form-control>
        </nz-form-item>

        <!-- 签名算法类型 -->
        <nz-form-item>
          <nz-form-label nzFor="alipaySignType">签名算法类型</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="aliPay.signType" name="alipaySignType" nzAllowClear nzPlaceHolder="Choose"
              [nzDisabled]="!aliPay.isActive">
              <nz-option nzValue="RSA2" nzLabel="RSA2"></nz-option>
              <nz-option nzValue="RSA" nzLabel="RSA"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>

        <!-- 是否从文件读取公私钥 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="aliPayIsKeyFromFile" [(ngModel)]="aliPay.isKeyFromFile" [nzDisabled]="!aliPay.isActive">是否从文件读取公私钥(如果勾选
                ，那么公私钥应该配置为密钥文件路径)</label>
            </div>
          </div>
        </div>

      </nz-tab>

      <!-- 国际支付宝支付选项卡 -->
      <nz-tab [nzTitle]="globalAlipayTabTitleTpl">
        <ng-template #globalAlipayTabTitleTpl>
          <span>国际支付宝支付</span>
        </ng-template>

        <!-- 是否启用 -->
        <div nz-col nzSpan="24">
          <div nz-row>
            <div style="margin-bottom: 20px;" nz-col nzSpan="12">
              <label nz-checkbox name="globalAliPayIsActive" [(ngModel)]="globalAliPay.isActive">是否启用(请确认配置正确后再启用！)</label>
            </div>
          </div>
        </div>

        <!-- MD5密钥\安全检验码 -->
        <nz-form-item>
          <nz-form-label nzFor="globalAliPayKey">MD5密钥\安全检验码</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="MD5密钥\安全检验码" name="globalAliPayKey" [attr.disabled]="!globalAliPay.isActive ? 'disabled' : null"
              [(ngModel)]="globalAliPay.key">
          </nz-form-control>
        </nz-form-item>

        <!-- MD5密钥\安全检验码 -->
        <nz-form-item>
          <nz-form-label nzFor="globalAliPayKey">MD5密钥\安全检验码</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="MD5密钥\安全检验码" name="globalAliPayKey" [attr.disabled]="!globalAliPay.isActive ? 'disabled' : null"
              [(ngModel)]="globalAliPay.key">
          </nz-form-control>
        </nz-form-item>

        <!-- 合作商户uid -->
        <nz-form-item>
          <nz-form-label nzFor="globalAliPayPartner">合作商户uid</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="合作商户uid" name="globalAliPayPartner" [attr.disabled]="!globalAliPay.isActive ? 'disabled' : null"
              [(ngModel)]="globalAliPay.partner">
          </nz-form-control>
        </nz-form-item>

        <!-- 支付宝网关 -->
        <nz-form-item>
          <nz-form-label nzFor="globalAliPayGatewayurl">支付宝网关</nz-form-label>
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="支付宝网关" name="globalAliPayGatewayurl" [attr.disabled]="!globalAliPay.isActive ? 'disabled' : null"
              [(ngModel)]="globalAliPay.gatewayurl"></textarea>
          </nz-form-control>
        </nz-form-item>

        <!-- 服务器异步通知页面路径 -->
        <nz-form-item>
          <nz-form-label nzFor="globalAliPayNotify">服务器异步通知页面路径</nz-form-label>
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="服务器异步通知页面路径" name="globalAliPayNotify" [attr.disabled]="!globalAliPay.isActive ? 'disabled' : null"
              [(ngModel)]="globalAliPay.notify"></textarea>
          </nz-form-control>
        </nz-form-item>

        <!-- 页面跳转同步通知页面路径 -->
        <nz-form-item>
          <nz-form-label nzFor="globalAliPayReturnUrl">页面跳转同步通知页面路径</nz-form-label>
          <nz-form-control>
            <textarea rows="4" nz-input placeholder="页面跳转同步通知页面路径" name="globalAliPayReturnUrl" [attr.disabled]="!globalAliPay.isActive ? 'disabled' : null"
              [(ngModel)]="globalAliPay.returnUrl"></textarea>
          </nz-form-control>
        </nz-form-item>

        <!-- 结算币种 -->
        <nz-form-item>
          <nz-form-label nzFor="globalAliPayCurrency">结算币种</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="结算币种" name="globalAliPayCurrency" [attr.disabled]="!globalAliPay.isActive ? 'disabled' : null"
              [(ngModel)]="globalAliPay.currency">
          </nz-form-control>
        </nz-form-item>

        <!-- 分账信息暂时还没有添加，下个版本准备添加！！！ -->

      </nz-tab>
    </nz-tabset>
  </form>

</nz-card>

<ng-template #cardTitle>
  <div class="card_title">
    <i style="margin-right: 10px" nz-icon [type]="'pay'" theme="fill"></i> 支付配置
  </div>
</ng-template>

<ng-template #extraTemplate>
  <div class="tab_operate">
    <button nz-button type="button" (click)="submitForm()" class="ant-btn ant-btn-primary"><span>全部保存</span></button>
  </div>
</ng-template>
